<template>
    <div class="common-body">
        <!-- 面包屑 -->
        <breadcrumb
            :breadcrumbArr="breadcrumbArr"
            :breadcrumbLastItem="breadcrumbLastItem"
            state="detail"
            @handleBack="handleBack"
        />
        
        <div :class="[contractState ? 'ccui-app-container-detail' : 'detail-box','ccui-clearfix']" v-if="isTrue">
            <!--  主体左侧内容  -->
            <div :class="[!contractState ? 'detail-info' : '']">
                <!--  审批状态 icon  -->
                <div v-if="!contractState" class="detail-info-el-Label">
                    <el-label :type="approving" v-if="approvingStatus"></el-label>
                </div>
                <div :class="[!contractState? 'detail-info-form-container': 'ccui-app-container-detail-body']">
                    <el-tabs v-model="activeName" class="el-tabs__customize">
                        <el-tab-pane label="基本信息" name="a">
                            <el-group-title class="d_jump">
                                <template slot="groupTitle">
                                    <basicInfoDetail :basic-info="basicInfo" :basic-info-obj="basicInfoObj"/>
                                </template>
                            </el-group-title>
                        </el-tab-pane>
                        
                        <el-tab-pane label="结算单明细" name="b">
                            <div class="ccui-multifunctional-table-wrapper">
                                <el-table
                                    :data="showTableData"
                                    max-height="525"
                                    ref="tableList"
                                    border
                                    :summary-method="getSummaries"
                                    show-summary
                                >
                                    <el-table-column
                                        v-for="(item, i) in tableColumnList"
                                        :label="item.label"
                                        :fixed="item.fixed"
                                        :type="item.type"
                                        :prop="item.prop"
                                        :header-align="item.headerAlign || 'left'"
                                        :align="item.align"
                                        :min-width="item.width"
                                        :key="i"
                                        :show-overflow-tooltip="true"
                                    >
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        
                        <el-tab-pane label="验收单明细" name="c">
                            <div class="ccui-multifunctional-table-wrapper">
                                <el-table
                                    :data="showTableData1"
                                    max-height="525"
                                    ref="tableList"
                                    border
                                    show-summary
                                    :summary-method="getSummaries1"
                                >
                                    <el-table-column
                                        v-for="(item, i) in tableColumnList1"
                                        :label="item.label"
                                        :fixed="item.fixed"
                                        :type="item.type"
                                        :prop="item.prop"
                                        :header-align="item.headerAlign || 'left'"
                                        :align="item.align"
                                        :min-width="item.width"
                                        :key="i"
                                        :show-overflow-tooltip="true"
                                    >
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        
                        <el-tab-pane label="附件" name="d" class="file-group">
                            <fileInfo
                                ref="fileInfo"
                                isTab
                                state="detail"
                                v-model="fileList"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!--  右边审批状态  -->
            <approval-read-record
                v-if="!contractState"
                :approvalRecordData="approvalRecordData"
            />
        </div>
        
        <!--  底部导航栏及签名导出  -->
        <bottomGuide
            v-if="isTrue"
            busiType="121"
            exportMethod="post"
            pageType="equipmentSettlementwrite/detailExport"
           :approvalStatus="approving"
            :curPageId="$route.params.id"
            @handleBack="handleBack"
        />
    </div>
</template>

<script>
import basicInfoDetail from "@/basa/components/public_practice/basicInfoDetail";
import publicComponent from "@/basa/components/public";
import fileInfo from "@/basa/components/public/uploadInfo2";
import BigNumber from "bignumber.js";
import {getSettlementWriteById} from "@/app/settlement-management/equipment/api";

export default {
    name: "item_detail",
    components: {
        basicInfoDetail,
        fileInfo,
        breadcrumb: publicComponent.breadcrumb,
        bottomGuide: publicComponent.bottomGuide,
        approvalReadRecord: publicComponent.approvalRecord,
    },
    data() {
        return {
            activeName: "a",
            businessCode: "",
            breadcrumbLastItem: "",
            // 面包屑导航
            breadcrumbArr: [
                {
                    path: "/settlement-management/settlement-maintenance-approval/settlement-maintenance-all",
                    text: "结算管理"
                },
                {
                    path: "/settlement-management/maintain/ListAll",
                    text: "采购结算管理"
                },
                {
                    path: "/settlement-management/equipment-writeOff/ListAll",
                    text: "结算单冲销"
                }
            ],
            contractState: "",
            approvalRecordData: [],
            approving: "", // 审批状态
            approvingStatus: true, // 审批状态展示
            approvingType: {
                1: "approving", // 审批中
                2: "withdrawn", // 已撤回
                3: "approvaled", // 审批通过
                4: "sendback", // 审批退回
                5: "unapproval" // 审批不通过
            },
            isTrue: false,
            basicInfo: [
                {
                    label: "冲销原因",
                    value: "writeoffReason",
                    colSpan: 22,
                    remarkClass: true,
                    title: true
                },
                {
                    label: "填报单位",
                    value: "reportInOrgName"
                },
                {
                    label: "冲销单编号",
                    value: "writeoffCode"
                },
                {
                    label: "冲销单名称",
                    value: "writeoffName"
                },
                {
                    label: "冲销期间",
                    value: "reversal"
                },
                {
                    label: "结算单编号",
                    value: "settlementCode"
                },
                {
                    label: "结算单名称",
                    value: "settlementName"
                },
                {
                    label: "合同编号",
                    value: "contractCode"
                },
                {
                    label: "合同名称",
                    value: "contractName"
                },
                {
                    label: "供应商",
                    value: "supplierName"
                },
                {
                    label: "合同金额",
                    value: "contractMoney"
                },
                {
                    label: "冲销数量",
                    value: "writeoffCount"
                },
                {
                    label: "冲销金额",
                    value: "writeoffMoney"
                },
                {
                    label: "编制人",
                    value: "reportUsername"
                },
                {
                    label: "编制日期",
                    value: "reportTime"
                },
                {
                    label: "备注",
                    value: "remark",
                    colSpan: 22,
                    remarkClass: true,
                    title: true
                }
            ],
            basicInfoObj: {},
            tableData: [],
            showTableData: [],
            tableColumnList: [
                {
                    type: "index",
                    label: "序号",
                    fixed: "left",
                    width: "55"
                },
                {
                    label: "设备物资编码",
                    prop: "materialCode",
                    width: "110",
                    fixed: true
                },
                {
                    label: "验收单编号",
                    prop: "acceptCode",
                    width: "130",
                    fixed: true
                },
                {
                    label: "设备物资名称",
                    prop: "materialName",
                    width: "300"
                },
                {
                    label: "设备型号说明",
                    prop: "materialState",
                    width: "130"
                },
                {
                    label: "计量单位",
                    prop: "measureUnit",
                    width: "100"
                },
                {
                    label: "验收日期",
                    prop: "acceptTime",
                    width: "100"
                },
                {
                    label: "剩余可结算数量",
                    prop: "unTransportCount",
                    width: "130"
                },
                {
                    label: "冲销数量",
                    prop: "settlementCount",
                    width: "100"
                },
                // {
                //     label: "税率",
                //     prop: "taxRatePercent"
                // },
                
                {
                    label: "含税单价",
                    prop: "unitPriceWithTax",
                    width: "130"
                },
                {
                    label: "冲销金额",
                    prop: "moneyWithTax",
                    width: "130"
                },
                // {
                //     label: "不含税单价",
                //     prop: "unitPriceWithoutTax",
                //     width: "150",
                //     align: "right"
                // },
                // {
                //     label: "不含税金额",
                //     prop: "moneyWithoutTax",
                //     width: "150",
                //     align: "right"
                // },
                {
                    label: "生产厂家/品牌",
                    prop: "brand",
                    width: "130"
                }
            ],
            showTableData1: [],
            tableColumnList1: [
                {
                    type: "index",
                    label: "序号",
                    fixed: "left",
                    width: "55"
                },
                {
                    label: "验收单编号",
                    prop: "acceptCode",
                    width: "155",
                    fixed: true
                },
                {
                    label: "验收单名称",
                    prop: "acceptName",
                    width: "200",
                    fixed: true
                },
                {
                    label: "验收日期",
                    prop: "acceptTime",
                    width: "100"
                },
                {
                    label: "验收人",
                    prop: "acceptor"
                },
                {
                    label: "设备物资名称",
                    prop: "materialName",
                    width: "300"
                },
                {
                    label: "设备型号说明",
                    prop: "materialState",
                    width: "130"
                },
                {
                    label: "计量单位",
                    prop: "measureUnit"
                },
                {
                    label: "合同编号",
                    prop: "contractCode",
                    width: "150"
                },
                {
                    label: "本次结算数量",
                    prop: "settlementCount",
                    width: "130"
                },
                {
                    label: "实际验收数量",
                    prop: "acceptCount",
                    width: "130"
                },
                {
                    label: "结算单价",
                    prop: "unitPriceWithTax",
                    width: "130",
                    align: "right"
                },
                {
                    label: "生产厂家/品牌",
                    prop: "brand",
                    width: "130"
                },
                {
                    label: "备注",
                    prop: "remarks",
                    width: "100"
                }
            ],
            fileList: []
        }
    },
    methods: {
        getList() {
            getSettlementWriteById({id: this.$route.params.id, isShowPageLoading: true}).then(res => {
                let result = res.data.data;
                delete result.settlementWriteOffBO.createTime;
                this.contractState = !result.approveRecords.length;
                this.basicInfoObj = result.settlementWriteOffBO;
    
                this.basicInfoObj.contractMoney = this.basicInfoObj.contractMoney? (+this.basicInfoObj.contractMoney).toFixed(2) : "";
                this.basicInfoObj.writeoffMoney = this.basicInfoObj.writeoffMoney? (+this.basicInfoObj.writeoffMoney).toFixed(2) : "";
                this.basicInfoObj.writeoffCount = this.basicInfoObj.writeoffCount? (+this.basicInfoObj.writeoffCount).toFixed(3) : "";
                this.basicInfoObj.reversal = `${result.settlementWriteOffBO.writeoffStart}至${result.settlementWriteOffBO.writeoffEnd}`;
                result.settlementBOList.map(e => {
                    e.unTransportCount = e.unTransportCount? (+e.unTransportCount).toFixed(3) : "";
                    e.settlementCount = e.settlementCount? (+e.settlementCount).toFixed(3) : "";
                    e.unitPriceWithTax = e.unitPriceWithTax? (+e.unitPriceWithTax).toFixed(2) : "";
                    e.moneyWithTax = e.moneyWithTax? (+e.moneyWithTax).toFixed(2) : "";
                    e.acceptCount = e.acceptCount? (+e.acceptCount).toFixed(2) : "";
                    e.unitPriceWithTax = e.unitPriceWithTax? (+e.unitPriceWithTax).toFixed(2) : "";
                });
                this.handleTable(result.settlementBOList);
                this.showTableData1 = result.settlementBOList.filter(e => e.isMainInventory == 0 && e.isOtherCost == 0 && !e.isCategories && e.acceptCode);
                this.fileList = result.writeOffFiles;
                // 审批icon
                this.approvalRecordData = result.approveRecords;
                this.approvalRecordData.forEach(item => {
                    if (item.operState === 0) {
                        item.icon = "el-icon-time";
                        item.color = "#F5A623";
                    }
                });
                this.isTrue = true;
                this.approving = this.approvingType[this.basicInfoObj.approvalStatus];
                this.approvingStatus = false;
                this.$nextTick(() => {
                    this.approvingStatus = true;
                });
            });
        },
        handleTable(data) {
            if (data.length) {
                let yunshu = [], // 运输类
                    hebingqian = [], // 没有合并的数据
                    hebinghou = [], // 合并后隐藏的数据
                    hebingMerge = [], // 合并后生成的数据
                    qita = []; // 其他类数据
                data.map(e => {
                    if (e.isCategories && e.isCategories == 1) {
                        yunshu.push(e);
                    } else if (e.isMerge == 0 && e.isMainInventory == 0 && e.isOtherCost == 0) {
                        hebingqian.push(e);
                    } else if (e.isMerge == 1 && e.isMainInventory == 0 && e.isOtherCost == 0) {
                        hebinghou.push(e);
                    } else if (e.isMerge == 1 && e.isMainInventory == 1 && e.isOtherCost == 0) {
                        hebingMerge.push(e);
                    } else if (e.isOtherCost && e.isOtherCost == 1) {
                        qita.push(e);
                    }
                });
                this.showTableData = [...hebingqian, ...hebingMerge, ...yunshu, ...qita];
            } else {
                this.showTableData = [];
            }
        },
        // 合计
        getSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            if (column.label == "验收数量" || column.label == "冲销数量") {
                                let num = Number(prev) + Number(curr);
                                let numToFixed = Number(num)
                                return numToFixed;
                            } else if (
                                column.label == "含税金额" ||
                                column.label == "不含税金额" ||
                                column.label == "冲销金额"
                            ) {
                                let num = new BigNumber(Number(prev)).plus(Number(curr)).toNumber();
                                return Number(num)
                            }
                        } else {
                            return (prev = " ");
                        }
                    }, 0);
                    if (column.label == "验收数量") {
                        sums[index] = Number(sums[index]).toFixed(3);
                    }
                    if (column.label == "冲销数量") {
                        sums[index] = Number(sums[index]).toFixed(3);
                    }
                    if (column.label == "结算数量") {
                        sums[index] = Number(sums[index]).toFixed(3);
                    }
                    
                    if (column.label == "含税金额") {
                        sums[index] = Number(sums[index]).toFixed(2);
                    }
                    if (column.label == "冲销金额") {
                        sums[index] = Number(sums[index]).toFixed(2);
                    }
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        // 合计
        getSummaries1(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            if (column.label == "订单数量" || column.label == "验收数量") {
                                let num = new BigNumber(Number(prev)).plus(Number(curr)).toNumber();
                                return Number(num)
                            }
                        } else {
                            return (prev = " ");
                        }
                    }, 0);
                    if (column.label == "订单数量") {
                        sums[index] = Number(sums[index]).toFixed(3);
                    }
                    if (column.label == "验收数量") {
                        sums[index] = Number(sums[index]).toFixed(3);
                    }
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        handleBack() {
            this.$router.push("/settlement-management/equipment-writeOff/ListAll");
        }
    },
    activated() {
        this.activeName = "a";
        this.getList();
    },
    deactivated() {
        this.isTrue = false;
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-table__fixed-header-wrapper {
    th {
        pointer-events: auto;
    }
}

/deep/ .el-table__fixed,
/deep/ .el-table__fixed-right {
    pointer-events: none;
    
    td {
        pointer-events: auto;
    }
    
}
</style>